include ../mixins/image.pug
include ../mixins/modal.pug

style.
  .a-address-form .label {
    justify-content: flex-end;
    align-items: flex-start;
    padding-right: .3rem;
    width: 1.18rem;
  }

  .a-address-form .ui-flex-1 {
    flex: 1;
  }

  .a-address-form input.form-control {
    padding: .06rem .1rem;
    color: #1D2125;
    font-size: .14rem;
    height: auto;
  }


  .a-address-form textarea.form-control {
    padding:.06rem .1rem;
    color: #1D2125;
    font-size: .14rem;
  }

  .a-address-form .vs__search {
    width: 0;
    padding: 0;
  }

  .a-address-form .vs__clear {
    display: none;
  }

  .a-address-form .vs__open-indicator {
    background-image: url("https://oss.kaoyanvip.cn/uploads/file1592630388713.png");
    background-size: 100%;
    width: .07rem;
    height: .05rem;
  }

  .a-address-form .v-select {
    width: 1.5rem;
  }

  .a-address-form .vs__selected {
    width: 1.2rem;
    color: #1D2125;
    font-size: .14rem;
  }

  .a-address-form .vs__dropdown-menu {
    z-index: 10000;
  }

  .a-address-form-item {
    margin-bottom: .3rem;
  }

  .a-address-form-btn {
    width: 1.4rem;
    height: .48rem;
    line-height: .45rem;
  }

  .a-address-form-btn:nth-child(n+2) {
    margin-left: .3rem;
  }

  .v-distpicker-placeholder-province label:nth-child(1) .vs__selected, .v-distpicker-placeholder-city label:nth-child(2) .vs__selected,  .v-distpicker-placeholder-area label:nth-child(3) .vs__selected {
    color: #949494;
  }

  .a-address-form-item__label {
    margin-top: .06rem;
  }

template#address-tpl
  div
    div.a-address-form.mx-r(:class="getCls()")
      jsonprint(v-model="model")
      .ui-flex.ui-full-w.a-address-form-item
        div.label.ui-flex.ui-items-center.a-address-form-item__label 收货人
        my-field(data-for='address_name', @clear="model.name = ''")
          input(id='address_name', type="text", v-model="model.name",
            class="form-control", placeholder="收货人", style="width: 2.52rem")
      .ui-flex.ui-full-w.a-address-form-item
        div.label.ui-flex.ui-items-center.a-address-form-item__label 手机号
        my-field(data-for='address_mobile', @clear="model.mobile = ''")
          input(id="address_mobile", type="text", maxlength="11", v-model="model.mobile",
            class="form-control" placeholder="手机号", style="width: 2.52rem")
      .ui-flex.ui-full-w.a-address-form-item
        div.label.ui-flex.ui-items-center.a-address-form-item__label 所在地区
        //area-select(class="custom-area-select", :level='2', v-model="model.selected" :data="pcaa")
        v-distpicker(class="custom-area-select",
          :initval="initval", :placeholders="placeholders"
          :province="model.addressprovince" :city="model.addresscity" :area="model.addressdist"
          @selected="onSelected")
      .ui-flex.ui-full-w.a-address-form-item
        div.label.ui-flex.ui-items-center.a-address-form-item__label 详细地址
        my-field(data-for='address_detail', class="ui-flex-1", @clear="model.address = ''")
          textarea(id="address_detail", type="text", maxlength="11", v-model="model.address",
            class="form-control" placeholder="详细地址")
    .ui-flex.ui-items-center.ui-justify-between.mx-auto
      u-trigger(:checked="model.is_default")
        .ui-flex.ui-items-center(slot="yes")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592627325590.png', '.2rem')
          div(style="width: .1rem;") &nbsp;
          div.bs-text-color-black.ui-line-height-1 设置为默认地址
        .ui-flex.ui-items-center(slot="no")
          +simage('https://oss.kaoyanvip.cn/uploads/file1592090029015.png', '.2rem')
          div(style="width: .1rem;") &nbsp;
          div.bs-text-color-black.ui-line-height-1 设置为默认地址
      .ui-flex.ui-items-center
        .btn.btn-light.a-address-form-btn(@click="cancel") 取消
        .btn.btn-primary.a-address-form-btn(@click="save") 保存

template#addressapp-tpl
  +modal('modalb')(cls="fade modalb", contentcls='modalb-c')
    div
      div.ui-flex.ui-items-center.ui-justify-between.mx-auto
        div
          div(style="height: .3rem")
          div.bs-text-color-black.ui-bold.text-sz-400.ui-line-height-1 新增收货地址
          div(style="height: .3rem")
        div.ui-relative
          +simage('https://oss.kaoyanvip.cn/uploads/file1592627396467.png', '.16rem')
          div.ui-pos-a-full.ui-cus-pointer(data-dismiss="modal", style="padding: .2rem; margin-left: -.12rem; margin-top: -.12rem")
      .app-line
      u-address
      div(style="height: .5rem")

#addressapp

+modal('modala')(cls="fade modala", contentcls='modala-c')
  div(style="height: .8rem")
  div.bs-text-color-black.modala-c__title 请您在新打开的页面完成付款
  div(style="height: .2rem")
  div
    div.bs-text-color-black.modala-c__p 支付完成前，请不要关闭此窗口
    div.bs-text-color-black.modala-c__p 支付完成后，请根据您支付的情况点击下面按钮
  div(style="height: .5rem")
  .ui-flex.ui-items-center.ui-justify-between
    .btn.btn-primary.modala-c__b 支付成功
    .btn.btn-light.modala-c__b 支付失败
  div(style="height: .4rem")

script.
  document.addEventListener('on-address-save', function () {
    $('#modala').modal({
      backdrop: 'static'
    })
  })